<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			*{
				padding: 0;
				margin: 0;
			}
			canvas{
				background: #272822;
				position: relative;
			}
		</style>
	</head>
	<body>
		<canvas id='canvas' width='900' height='600'></canvas>
		<script>
			//获得画板
			var canvas=document.getElementById('canvas');
			//获得绘画环境
			var cv=canvas.getContext('2d');
			
			
			//设置文字属性
			cv.font='35px 微软雅黑';
			//设置填充颜色
			cv.fillStyle='yellow';
			//水平对齐方式
			cv.textAlign='center';
			//垂直对齐方式
			cv.textBaseline='bottom'
//			//将文字画入
//			cv.fillText('后盾人人人做后盾',300,200,300);
			
			
			//获得文本宽度
			var str='后盾人人人做后盾';
			var re=cv.measureText(str).width;
			alert(re);
			//将文字画入
			cv.fillText(str,300,200,300);
			
			//画参考横线线
			//开启路径
			cv.beginPath();
			cv.moveTo(0,200);
			cv.lineTo(900,200);
			cv.strokeStyle='white';
			cv.lineWidth=2;
			cv.stroke();
			
			//画参考竖线
			//开启路径
			cv.beginPath();
			cv.moveTo(300,0);
			cv.lineTo(300,600);
			cv.strokeStyle='white';
			cv.lineWidth=2;
			cv.stroke();
			
			//设置线条文字
			cv.strokeStyle='gold';
			//将空心文字画入
			cv.strokeText('大家一起做后盾人',400,350,500);
			
		</script>
	</body>
</html>
